<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
      <el-tab-pane v-for="item in tabsList" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane> 
    </el-tabs>
    <div class="radio-container p-10px border-1 border-#ccc border-solid rounded-8px">
      <el-radio-group v-model="swiperRadio">
        <el-radio v-for="item in listComputed" :key="item.value" :value="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </div>
    <div class="swiper-container">
      <component :is="listComputed.find(item => item.value === swiperRadio)?.component" :obj="obj" @swiper="swiper"/>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
// 使用vue组件方式
const BaseSwiper = defineAsyncComponent(() => import('./components/swiper/BaseSwiper.vue'))
const NavigationSwiper = defineAsyncComponent(() => import('./components/swiper/NavigationSwiper.vue'))
const PaginationSwiper = defineAsyncComponent(() => import('./components/swiper/PaginationSwiper.vue'))
const PaginationDynamicSwiper = defineAsyncComponent(() => import('./components/swiper/PaginationDynamicSwiper.vue'))
const PaginationCustomSwiper = defineAsyncComponent(() => import('./components/swiper/PaginationCustomSwiper.vue'))

// 使用WebComponent方式
const RegisterSwiper = defineAsyncComponent(() => import('./components/register/Base.vue'))

const activeName = ref('Vue')
const tabsList = [
  {
    label: 'vue方式',
    name: 'Vue',
  },
  {
    label: 'Register方式',
    name: 'Register',
  },
]
const swiperRadio = ref(1)
const obj = ref({
  name: 'swiper',
})

const swiper = (swiper:any) => {
  console.log(swiper);
}
const swiperList = ref([
  {
    value: 1,
    label: t('html5.swiper.default'),
    component: shallowRef(BaseSwiper),
  },
  {
    value: 2,
    label: t('html5.swiper.navigation'),
    component: shallowRef(NavigationSwiper),
  },
  {
    value: 3,
    label: t('html5.swiper.pagination'),
    component: shallowRef(PaginationSwiper),
  },
  {
    value: 4,
    label: t('html5.swiper.paginationDynamic'),
    component: shallowRef(PaginationDynamicSwiper),
  },
  {
    value: 5,
    label: t('html5.swiper.paginationCustom'),
    component: shallowRef(PaginationCustomSwiper),
  },
])
const registerSwiperList = ref([
  {
    value: 1,
    label: t('html5.swiper.register'),
    component: shallowRef(RegisterSwiper),
  },
])
const listComputed = computed(() => {
  let list = activeName.value === 'Vue' ? swiperList.value : registerSwiperList.value
  return list
})
const handleChange = ()=>{
  // activeName.value = item.name
  // console.log(item.name,activeName.value);
  swiperRadio.value = 1
}
</script>
<style scoped lang="scss">
.swiper-container {
  width: 50%;
  height: 300px;
  margin-top: 30px;
}
</style>